<style lang="less">
    @import '../styles/menu.less';
</style>

<template>
    <div class="verticalMenu" >
        <Menu :style="{background: theme.background,color:theme.color}" :active-name="activeName"  @on-select="handleMenu">
            <Submenu :name="item.name" :key="index"  v-for="(item, index) in menuList">
                <template slot="title">
                    <Icon :type="item.icon" />
                   {{item.title}}
                </template>
                <MenuItem  :key="i" :name="child.name" v-for="(child, i) in item.children">
                    <span>{{child.title}}</span>
                </MenuItem>
            </Submenu>
        </Menu>
    </div>
</template>
<script>
    export default {
        name: 'verticalMenu',
        data() {
            return {
                activeName:'',
                menuPath: 0,
                childEnter: 0,
            };
        },
        components: {},
        props: {
            theme:{
                type: Object,
                default:{}
            },
            shrink: {
                type: Boolean,
                default: false
            },
            menuList: {
                type: Array,
                required: true
            },
            beforePush: {
                type: Function
            },
        },
        mounted() {
           this.activeName = this.$route.name
        },
        computed: {},
        watch: {
            $route(to) {
                this.$store.commit('setCurrentPageName', to.name)
                localStorage.currentPageName = to.name
                this.activeName = to.name    
                console.log(this.activeName)       
            },
        },
        methods: {
            handleMenu(name) {
                console.log(name)
                let nowIndex = 0 
                let menuName = this.menuList.map(item => {
                      return item.name
                })
                for (var i = 0 ; i < this.menuList.length ; i++) {
                    let menuPath = this.menuList[i].children.map(item => {
                        return item.name
                    })
                    if(menuPath.indexOf(name) != -1){
                        nowIndex = i
                        this.childEnter = menuPath.indexOf(name)
                    }
                }
                this.menuPath = menuName.indexOf(this.menuList[nowIndex].name) 
                this.$store.commit('increateTag', this.menuList[this.menuPath].children[this.childEnter])
                this.activeName = name
                this.$router.push({
                    name: name
                })
            },
        }
    };
</script>
